<template>
  <div class="edit-body" v-loading="load" element-loading-background="rgba(255, 255, 255, 1)">
    <div class="active-eidt-head">
      <edit-head :edit="true"></edit-head>
    </div>
    <div class="active-edit-body">
      <!-- 左侧 -->
      <div class="active-edit-left">
        <ul class="active-edit-menu">
          <li
            v-for="(item,key) in menu"
            :key="key"
            :class="menu_index == key ? 'active-edit-menu-item active' : 'active-edit-menu-item'"
            @click="changeMenu(key)"

          >
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="active-edit-content">
        <div style="height:20px;"></div>
        <div class="edit-body-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>{{menu[menu_index].name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 右侧页面内容 -->
        <div>
          <!-- 数据分析 -->
          <div v-if="menu[menu_index].state == 0">
            <base-data :id="id"></base-data>
          </div>
          <!-- 信息编辑 -->
          <div v-if="menu[menu_index].state == 1">
            <edit-info :active_id = "id"></edit-info>
          </div>
          <!-- 报名列表 -->
          <div v-if="menu[menu_index].state == 2">
            <user-list :type="active_base.type" :active_id="id"></user-list>
          </div>
          <!-- 订单列表 -->
          <div v-if="menu[menu_index].state == 3">
            <order-list :active_id="id" :type="active_base.type"></order-list>
          </div>
          <!-- 赛事成绩 -->
          <div v-if="menu[menu_index].state == 4 && active_base.type == 1">
            <result-match :active_id ="id"></result-match>
          </div>
          <!-- 评论 -->
          <div v-if="menu[menu_index].state == 5">
            <eval-list :active_id ="id"></eval-list>
          </div>
          <!-- 物资领取 -->
          <!-- <div v-if="menu_index == 6">
            <goods-list></goods-list>
          </div> -->
          <!-- 检录签到 -->
          <div v-if="menu[menu_index].state == 6">
            <sign-in :active_id="id"></sign-in>
          </div>
          <!-- 查看相册 -->
          <div v-if="menu[menu_index].state == 7">
            <album-list :active_id = "id"></album-list>
          </div>
          <!-- 需求提交 -->
          <div v-if="menu[menu_index].state == 8">
            <add-needs :active_id = "id"></add-needs>
          </div>
          <!-- 团报设置 -->
          <div v-if="menu[menu_index].state == 9 && active_base.type == 1">
            <team-sign :active_id = "id"></team-sign>
          </div>
          <!-- 任务结果 -->
          <div v-if="menu[menu_index].state == 10 && active_base.type == 3">
            <active-result :active_id="id" ></active-result>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import baseData from './edit/base-date.vue';
import userList from './edit/user-list.vue';
import orderList from './edit/order-list.vue';
import resultMatch from './edit/result-match.vue';
import evalList from './edit/eval-list.vue';
import goodsList from './edit/goods-list.vue';
import signIn from './edit/sign-in.vue';
import albumList from './edit/album-list.vue';
import editInfo from './edit/edit-info.vue';
import addNeeds from './edit/add-needs.vue';
import teamSign from './edit/team-sign.vue';
import activeResult from './edit/active-result.vue';
import editHead from '../app/head.vue';

export default {
  components:{ baseData , userList , orderList , resultMatch , evalList , goodsList , signIn , albumList , editInfo , addNeeds , teamSign , activeResult , editHead},
  data() {
    return {
      menu: [
        { name: "数据分析", icon: "el-icon-monitor" , state : 0},
        { name: "活动编辑", icon: "el-icon-edit" , state : 1},
        { name: "报名列表", icon: "el-icon-user" , state : 2},
        { name: "订单列表", icon: "el-icon-document" , state : 3},
        
        { name: "评价列表", icon: "el-icon-time" , state : 5},
        // { name: "物资领取", icon: "el-icon-present" },
        
        { name: "查看相册", icon: "el-icon-camera" , state : 7},
        { name: "需求提交", icon: "el-icon-edit-outline" , state : 8},
        
      ],
      load : true,
      menu_index: 0,
      id : this.$route.params.id,
      active_base : {},
    };
  },
  mounted(){
    if(this.$route.query.edit) {
      this.menu_index = 1;
    }
    this.getBaseInfo();
  },
  methods:{
    //获取活动基本信息
    getBaseInfo(){
      this.load = true;
      this.ajaxs('active/getBaseInfo',{
        data : { id : this.id},
        success:(res) => {
          this.active_base = res.msg;
          if(this.active_base.type != 3) {
            this.menu.push({ name: "检录签到", icon: "el-icon-check" , state : 6});
          }
          if(this.active_base.type == 1) {
            
            this.menu.push({ name: "赛事成绩", icon: "el-icon-trophy" , state : 4 });
            this.menu.push({ name: "团报设置", icon: "el-icon-edit-outline"  , state : 9});
          }
          if(this.active_base.type == 3) {
            this.menu.push({ name: "任务结果", icon: "el-icon-s-claim" , state : 10 });
          }
          this.load = false;
        }
      });
    },
    //改变菜单
    changeMenu(key){
      if(this.menu_index == 1 && key != 1) {
        this.$confirm('离开页面的时候系统不会自动保存数据，请确定已保存修改?', '提示', {
          confirmButtonText: '离开',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.menu_index = key;
        }).catch(() => {         
        });
        return false;
      }
      this.menu_index = key;
    }
  }
};
</script>

<style>
@import url(../../assets/css/active/edit.css);
</style>